<template>
  <div class="f-all">
    <div class="f-zi">查看权限</div>
    <div class="f-table">
      <div class="f-one">
        <el-form :inline="true" :model="formInline" class="demo-form-inline" ref="formInline">
          <el-form-item label="权限名称:">
            <el-input v-model="formInline.jurisdiction_name" placeholder="角色名"></el-input>
          </el-form-item>
          <el-form-item label="所属模块:">
            <el-select v-model="formInline.super_id" placeholder="全部">
              <el-option
                v-for="item in options1"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="权限状态:">
            <el-select v-model="formInline.jurisdiction_state" placeholder="全部">
              <el-option label="全部" value></el-option>
              <el-option label="开启" value="0"></el-option>
              <el-option label="禁用" value="1"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="权限等级:">
            <el-select v-model="formInline.jurisdiction_level" placeholder="全部">
              <el-option label="全部" value></el-option>
              <el-option label="管理员权限" value="1"></el-option>
              <el-option label="其他权限" value="2"></el-option>
            </el-select>
          </el-form-item>
          <!-- <el-form-item>
            <el-button type="primary" @click="submitForm('formInline')">查询</el-button>
          </el-form-item> -->
        </el-form>
       
      </div>
       <div class="l-btn">
           <el-button type="primary" @click="submitForm('formInline')">搜索</el-button>
        </div>
      <div class="two">
        <el-table
          ref="multipleTable"
          border
          :data="currList"
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange"
          :header-cell-style="{background:'#f5f7fa',color:'#606266'}"
        >
          <el-table-column
            prop="jurisdiction_name"
            label="权限名称"
            show-overflow-tooltip
            align="center"
          ></el-table-column>
          <el-table-column
            prop="jurisdiction_url"
            label="权限路径"
            show-overflow-tooltip
            align="center"
          ></el-table-column>
          <el-table-column prop="super_id" label="所属模块" show-overflow-tooltip align="center">
            <template slot-scope="scope">
              <!-- <span v-text="scope.row.admin_lastloginstate=='0'?'启用':'禁用'"></span> -->
              <span v-if="scope.row.super_id=='1'">管理员</span>
              <span v-if="scope.row.super_id=='2'">人员实名管理</span>
              <span v-if="scope.row.super_id=='3'">机械设备管理</span>
              <span v-if="scope.row.super_id=='4'">现场车辆管理</span>
              <span v-if="scope.row.super_id=='5'">塔吊监测系统</span>
              <span v-if="scope.row.super_id=='6'">环境监测系统</span>
              <span v-if="scope.row.super_id=='7'">任务信息管理</span>
               <span v-if="scope.row.super_id=='8'">项目档案管理</span>
              
            </template>
          </el-table-column>

          <el-table-column
            prop="jurisdiction_level"
            label="权限等级"
            show-overflow-tooltip
            width="120"
            align="center"
          >
            <template slot-scope="scope">
              <span v-text="scope.row.jurisdiction_level=='1'?'管理员权限':'其它权限'"></span>
            </template>
          </el-table-column>
          <el-table-column
            prop="jurisdiction_rank"
            label="权限排序"
            show-overflow-tooltip
            align="center"
          ></el-table-column>
          <el-table-column
            prop="jurisdiction_state"
            label="权限状态"
            show-overflow-tooltip
            align="center"
          >
            <template slot-scope="scope">
              <span v-text="scope.row.jurisdiction_state=='0'?'开启':'关闭'"></span>
            </template>
          </el-table-column>
        </el-table>
      </div>
     
    </div>
     <div class="f-block">
        <el-pagination
          background
          layout="prev, pager, next"
          :total="tableData.length"
          :page-size="pageSize"
          @current-change="changePage"
        ></el-pagination>
      </div>
  </div>
</template>
<script>
import http from "../api";
export default {
  data() {
    return {
      options1: [
        {
          value: "",
          label: "全部",
        },
        {
          value: 1,
          label: "管理员",
        },
        {
          value: 2,
          label: "人员实名管理",
        },
        {
          value: 3,
          label: "机械设备管理",
        },
        {
          value: 4,
          label: "现场车辆管理",
        },
        {
          value: 5,
          label: "塔吊监测系统",
        },
        {
          value: 6,
          label: "环境监测系统",
        },
        {
          value: 7,
          label: "任务信息管理",
        },
        {
          value: 8,
          label: "项目档案管理",
        },
      ],
      formInline: {
        jurisdiction_name: "",
        super_id: "",
        jurisdiction_state: "",
        jurisdiction_level: "",
      },
      tableData: [],
      arrmokuai: [],
      currPage: 1, //当前页
      currList: [], //当前展示的数据数组
      pageSize: 7,
      newData: [],
    };
  },
  methods: {
    // 查询
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          http.getBuildJurisdictions(this.formInline).then((r) => {
            console.log("查询后", r);
            this.tableData = r.data;
            this.setCurrList(1);
            // this.formInline=''
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    // 分页
    setCurrList(index) {
      console.log("当前页", index);
      // console.log(this.currPage.length)
      this.currList = this.tableData.slice(
        (index - 1) * this.pageSize,
        index * this.pageSize
      );
    },
    changePage(val) {
      this.currPage = val;
      this.setCurrList(val);

      console.log(val);
    },
    setCurrent(row) {
      this.$refs.singleTable.setCurrentRow(row);
      console.log(row);
    },
    handleCurrentChange(val) {
      this.currentRow = val;
      console.log(val);
    },

    handleSelectionChange(val) {
      // this.multipleSelection = val;
      this.chuan = val;
      // console.log(val)
      console.log(this.chuan);
    },
  },
  mounted() {
     // 权限 http.goit
    http.goit({}).then((r) => {
      if (r.code == 2) {
        alert("权限不足");
        this.$router.push({
          name:"控制台"
        })
      } else {
        console.log(r);
        this.tableData = r.data;
        this.setCurrList(1);
      }
    });
    http.getBuildJurisdictions({}).then((r) => {
      if (r.code == 200) {
        this.tableData = r.data;
        this.setCurrList(1);
        console.log("权限table", this.tableData);
      } else {
        alert("权限不足，无法查看");
      }
    });
  },
};
</script>
<style scoped>
.el-form >>> .demo-form-inline >>> .el-form--inline{
  height: 45px;
}
.el-form-item{
  margin-bottom: 5px;
}
.f-all {
  margin-top: 15px;
  width: 100%;
  height: 645px;
  background-color: white;
  overflow-y: scroll;
  position: relative;
}
.f-zi {
  margin-top: 20px;
  font-size: 17px;
  color: #222;
  font-weight: 700;
  margin-left: 15px;
}
.f-table {
  margin-left: 15px;
  margin-top: 10px;
  width: 97%;
}
.f-one {
  width: 100%;
  /* background-color: wheat; */
  display: flex;
}
.f-block {
  /* margin-left: 80%;
  margin-top: 15px; */
  position: absolute;
  right: 1%;
  bottom: 5px;
}
.el-input >>> .el-input__inner {
  width: 185px;
  height: 30px;
  /* margin-top: -20px; */
  padding-left: 5px;
  /* margin-left: 5px; */
}
.el-select >>> .el-input__inner {
  /* width: 185px; */
  height: 30px;
  padding-left: 5px;
  /* margin-left: 5px; */
}
.el-button {
  height: 32px;
  padding: 5px 10px;
  /* background-color: rgba(68, 83, 199, 0.7); */
  border: cadetblue;

  /* color: white; */
}
.two{
  margin-top: 10px;
}
</style>